@extends('layouts.mobile_main')

@section('title', '翻贝券')

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}/css/public.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <style>
        .double_card_yes li{width: 100%;height: 2.4rem;background: url({{env('IMAGE_DOMAIN')}}images/background_p.png) 0 0 no-repeat;margin-top: 0.2rem;background-size: 100%;}
        .double_card_no li{width: 100%;height: 2.4rem;background: url({{env('IMAGE_DOMAIN')}}images/background_g.png) 0 0 no-repeat;margin-top: 0.2rem;background-size: 100%;}
    </style>
@endsection

@section('content')
<div class="paysu_outer" style="padding-top: 2.55rem">
	<header class="pay_detail oh" style="background-color: #fff;position:fixed;top:0;left:0;">
		<a class="fl" href="javascript:history.go(-1);">
		    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/back_p.png?v={{env('IMAGE_VERSION')}}" alt="">
		</a>
		<span class="fl co_violet fz_48">我的翻贝券</span>
	</header>
	<section>
		<p class="double_card_text oh">
			<span class="fz_40 tc" style="color: #9955C6;border-bottom:5px solid #9955C6">可用</span>
			<span class="fz_40 tc">历史</span>
		</p>
		<div class="double_card_outer">
			<!-- 可用翻贝券 -->
			@if(count($availablelists)>0)
                <ul class="double_card_yes">
                    @foreach($availablelists as $list)
                        <li class="oh co_white">
                            <p class="fz_58 double_card_name fl tc">翻贝券</p>
                            <div class="double_card_news fl tc">
                                <p class="fz_44">可享500元以下，立即翻倍</p>
                                <p class="fz_34" style="margin-top: 0.3rem;">有效期至<span>{{date('Y-m-d',strtotime($list['endtime']))}}</span></p>
                            </div>
                        </li>
                    @endforeach
                </ul>
			@else
                <!-- 没有可用翻贝券时显示 -->
                <div class="double_card_none">
                    <p class="fz_34 co_gray tc">您还没有翻贝券哟</p>
                    <a href="{{$recommendurl}}"><button class="me_out fz_34">邀请好友注册 即可获得翻贝券</button></a>
                </div>
			@endif

            @if(count($historylists) > 0)
                <!-- 已用或过期翻贝券 -->
                <ul class="double_card_no" style="display: none;">
                    @foreach($historylists as $list)
                        <li class="oh co_white">

                            <p class="fz_58 double_card_nameno fl tc">翻贝券
                                @if($list['status'] == '1')
                                    <span class="fz_40 fl">已使用</span>
                                @else
                                    <span class="fz_40 fl">已过期</span>
                                @endif
                            </p>
                            <div class="double_card_news fl tc">
                                <p class="fz_44">可享500元以下，立即翻倍</p>
                                <p class="fz_34" style="margin-top: 0.3rem;">有效期至<span>{{date('Y-m-d',strtotime($list['endtime']))}}</span></p>
                            </div>
                        </li>
                    @endforeach
                </ul>
			@endif
		</div>
	</section>
</div>
@endsection

@section('scriptResources')
    @parent
    <script>
	    window.onresize=function(){
    		pagesp();
    	}
    	$(function(){
    		var paysu_outer_h=$(window).height()-$(".pay_detail").height()-$(".double_card_text").height();
    		$(".paysu_outer").css({"min-height":paysu_outer_h-1});
    		$(".double_card_text span").eq(0).click(function(){
    			$(".double_card_text span").eq(0).css({"border-bottom":"5px solid #9955C6","color":"#9B58C7"}).siblings().css({"border-bottom":"none","color":"#808080"});
    		    $(".double_card_none").show();
                $(".double_card_yes").show();
                $(".double_card_no").hide();
    		})
    		$(".double_card_text span").eq(1).click(function(){
    			$(".double_card_text span").eq(1).css({"border-bottom":"5px solid #9955C6","color":"#9B58C7"}).siblings().css({"border-bottom":"none","color":"#808080"});
    			$(".double_card_none").hide();
    			$(".double_card_yes").hide();
    			$(".double_card_no").show();
    		})
    	})
    </script>
@endsection